<template>
  <tablee>
    <h1>TABLE</h1>
    <div class="chart-view">
      <v-charts class="chart" :option="optionA" />
    </div>
  </tablee>
</template>

<script setup lang="ts" name="table">
import { onBeforeMount } from 'vue';
import { ref } from 'vue';

// api
import { getUsers } from '@/api/jsonserver/users';

// echart
import * as echarts from 'echarts';

const optionA = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#ffffff',
      },
    },
  },
  legend: [
    {
      data: ['O2'],
      textStyle: {
        color: '#25a789',
      },
      formatter: function (name) {
        return name + '  35%';
      },
      left: 'left',
    },
    {
      data: ['H2S'],
      textStyle: {
        color: '#009af4',
      },
      formatter: function (name) {
        return name + '  14ppm';
      },
      left: 'center',
    },
    {
      data: ['SF6'],
      textStyle: {
        color: '#ecdb44',
      },
      formatter: function (name) {
        return name + '  6.9ppm';
      },
      left: 'right',
    },
  ],
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        color: 'white', // 设置X轴标签颜色为紫色
      },
      boundaryGap: false,
      data: [
        '0',
        '2',
        '4',
        '6',
        '7',
        '10',
        '12',
        '14',
        '16',
        '18',
        '20',
        '22',
        '24',
      ],
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '百分比',
      min: 0,
      max: 40,
      position: 'right',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLabel: {
        formatter: '{value} %',
        color: 'white',
      },
    },
    {
      type: 'value',
      name: 'ppm',
      min: 0,
      max: 15,
      position: 'left',
      axisLabel: {
        color: 'white', // 设置X轴标签颜色为紫色
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
  ],
  series: [
    {
      name: 'O2',
      type: 'line',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#25a789', // 设置线条颜色
        opacity: 0.1, // 设置线条半透明度
        type: 'solid', // 设置线条类型为实线
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(13,174,135,0.8)', // 起始颜色
          },
          {
            offset: 1,
            color: 'rgba(13,174,135,0)', // 结束颜色
          },
        ]),
      },
      data: [35, 33, 34, 35, 35, 36, 37, 38, 36, 35, 34, 36, 35],
      z: 1,
      yAxisIndex: 0,
    },
    {
      name: 'H2S',
      type: 'line',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#009af4', // 设置线条颜色
        opacity: 0.1, // 设置线条半透明度
        type: 'solid', // 设置线条类型为实线
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(20,142,228,0.8)', // 起始颜色
          },
          {
            offset: 1,
            color: 'rgba(20,142,228,0)', // 结束颜色
          },
        ]),
      },
      data: [10, 9, 11, 11, 10, 13, 11, 10, 9, 8, 9, 10, 11],
      z: 2,
      yAxisIndex: 0,
    },
    {
      name: 'SF6',
      type: 'line',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#ecdb44', // 设置线条颜色
        opacity: 0.1, // 设置线条半透明度
        type: 'solid', // 设置线条类型为实线
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(245,214,96,0.8)', // 起始颜色
          },
          {
            offset: 1,
            color: 'rgba(245,214,96,0)', // 结束颜色
          },
        ]),
      },
      data: [5, 4, 6, 4, 5, 3, 5, 3, 4, 2, 1, 5, 3, 3],
      z: 3,
      yAxisIndex: 0,
    },
  ],
});

onBeforeMount(() => {
  getUsers((res: any) => {
    console.log('获取user', res);
  });
});
</script>

<style lang="scss">
h1 {
  color: red;
}
.chart-view {
  width: 50rem;
  height: 30rem;
}
</style>
